<template>
    <div>
        <header>
            <div class="top">
                <el-page-header  content="歌单">
                </el-page-header>
            </div>
            <div class="con">
                <img class="img" src="@/assets/109951164127323230.jpg" alt="">
                <div class="right">
                    <h3>精品歌单</h3>
                    <span>居家古风 如何把生活过成诗</span>
                </div>
            </div>
        </header>
        <div class="navigate">
            <span class="nav-list">歌曲列表<i class="el-icon-arrow-right"></i></span>
            <a href="">华语</a>
            <a href="">轻音乐</a>
            <a href="">摇滚</a>
        </div>     

        <div class="container">
            <el-table
                :data="arrSongName"
                stripe
                style="width: 100%">
                <el-table-column
                prop=""
                label=""
                width="70"
               >
               <i class="el-icon-video-play"></i>
                </el-table-column>

                <el-table-column
                prop="name"
                label="歌曲标题"
                width="300">
                </el-table-column>

                <el-table-column
                prop="hMusic.playTime"
                label="时长"
                width="100">
                </el-table-column>

                <el-table-column
                prop="album.artists[0].name"
                label="歌手">
                </el-table-column>

                <el-table-column
                class="zj"
                prop="album.name"
                label="专辑">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
  //引入请求api
  import { getMusiclist } from "@/api" 
  export default {
    data(){
          return{
            //arrSongName:[], 
              arrSongName:[], 
              arrArtists:[],
              
          }
      },
    created () {
        this.getMusicList()
    },
    methods: {
        getMusicList(){
            getMusiclist()
            .then(res => {
                // console.log(res.data.recommend)
                // console.log(res.data.recommend[0].album.artists[0].name)
                // console.log(res.data.recommend[0].hMusic.playTime) 
                let total=res.data.recommend[0].hMusic.playTime/1000
                var min = parseInt(total/60)
                console.log(min)
                var ss =parseInt(total-min*60) 
                console.log(ss)
                let data = res.data.recommend
                this.arrSongName = data
                // console.log(this.arrSongName)
            }) 
        }
    }
  }
</script>
<style>
.top{
    height: 60px;
    background: #d44439;;
}
    .el-icon-back:before{
        font-size:40px;
        position: relative;
        top:10px;
        left:5px;
        color:white;
    } 
    .el-page-header__title{
        font-size:30px;
        position: relative;
        top:25px;
        left:20px;
        color:white;
    }
   .el-page-header__content{
      font-size:30px;
      position: relative;
        top:25px;
        left:100px;
        color:white;
   }
   .nav-list{
       font-size:32px;
   }
    .con{
        height:230px;
        /* border:1px solid black; */
        position: relative;
        /* background-image:url(../../assets/bg.jpg) cover; */
        background: url(../../assets/bg.jpg) no-repeat;
        background-size:cover;
    }
    .con .img{
        position: absolute;
        top:20px;
        left:20px;
        height:190px;
        width:280px;
    }
    .right{
        position: absolute;
        left:400px;
        font-size:30px;
        color:white;
    }
    
    .container{
        margin-top:20px;
        border:1px solid black;
    }
    .el-table th>.cell{
        /* border:1px solid black; */
        font-size:20px;
    }
   .el-table th{
       height:150px;
       font-size:50px;
   } 
</style>